<!-- 尾部 -->
<template>
  <div class="footer">
    <div class="footer-main flex">
      <div class="footer-lt">
        <div class="img">
          <el-image :src="logoImg" style="height: 100%; width: 100%" lazy />
        </div>
        <div class="info" style="width: 100%;">
          <p>
            3YData 是 Apple 官方授信合作伙伴，多年深耕应用商店的营销推广服务，在立足应用商店业务的基础上，不断拓展应用推广渠道，致力为每一位客户提供全方位的应用营销推广全案服务。
          </p>
          <p>从 2017 年至今，3YData 已经先后帮助全球范围内的金融、教育、出行、生活、游戏等领域数千款产品，在国内、海外成功利用应用商店实现用户增长目标。</p>

        </div>
      </div>

      <!-- <div class="footer-rt flex">
        <template v-for="item in codeOP">
          <div>
            <div class="img">
              <el-image
                :src="item.img"
                style="height: 100%; width: auto"
                lazy
              />
            </div>
            <p>
              {{ item.name }}
            </p>
          </div>
        </template>
      </div> -->
    </div>

    <div class="bah">
      <div class="line"><span v-for="item in 80" /></div>

      <p>
        2016-2025 3YData，All Rights Reserved.<a
          href="https://beian.miit.gov.cn/#/Integrated/index"
          target="_blank"
        >粤ICP备16049907号-4</a>
      </p>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

import { getCodeImg } from '@/api/create.js'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      logoImg: require('@/assets/images/base/logoBule.svg'),
      codeOP: [
        {
          img: require('@/assets/images/homepage/code1.png'),
          name: '3YData公众号'
        },
        {
          img: '',
          name: '3YData交流群'
        },
        {
          img: require('@/assets/images/homepage/code3.png'),
          name: '3YData小助手'
        }
      ]
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // this.getCode()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    setgo() {
      this.$router.go(0)
    },
    getCode() {
      getCodeImg({
        type: 'weChatGroup'
      }).then((res) => {
        if (res.data && res.data.code * 1 === 20000) {
          this.$set(this.codeOP, 1, {
            ...this.codeOP[1],
            img: res.data.data.url
          })
        } else {
          this.$set(this.codeOP, 1, { ...this.codeOP[1], img: '' })
        }
      })
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
/* //@import url(); 引入公共css类 */
body,
p,
span,
ul,
li,
em,
div {
  font-family: PingFang SC, "\82F9\679C\4E3D\4E2D\9ED1", "Helvetica Neue",
    Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC",
    "WenQuanYi Micro Hei", sans-serif !important;
}

.footer {
  max-width: 100vw;
  width: 100%;
  background-color: #fff;
  padding-top: 100px;

  .footer-main {
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
    min-width: 1200px;
    align-items: flex-start;
    padding-bottom: 46px;

    .footer-lt {
      .img {
        width: 133.22px;
        height: 22px;
        margin-bottom: 32px;
      }

      .info {
        width: 560px;
        margin-bottom: 2em;
        line-height: 28px;
        color: rgba(35, 58, 89, 0.6);

        p {
          font-size: 14px;
          text-align: justify;

          &:first-of-type {
          }
        }
      }
    }

    .footer-rt {
      flex: 1;
      justify-content: space-between;
      padding-top: 70px;
      padding-left: 100px;

      > div {
        .img {
          width: 134px;
          height: 136px;
          border: 10px solid #f0f0f0;
          border-radius: 4px;
          margin-bottom: 28px;
        }

        p {
          font-size: 14px;
          line-height: 14px;
          /* identical to box height, or 286% */
          text-align: center;
          color: #acb6c2;
        }
      }
    }
  }
}

.bah {
  height: 66px;
  max-width: 1200px;
  width: 100%;
  min-width: 1200px;
  margin: 0 auto;
  text-align: center;

  .line {
    max-width: 1200px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;

    span {
      display: inline-block;
      background-color: rgba(0, 0, 0, 0.2);
      margin: 0 4px;
      width: 10px;
      height: 1px;
    }
  }

  p {
    line-height: 66px;
    font-size: 14px;
    color: rgba(35, 58, 89, 0.6);
  }
}

/* pc端小屏样式 */
@media screen and (min-width: 1080px) and (max-width: 1240px) {
  .footer-main {
    transform: scale(0.9);
  }
}

/* 移动端样式*/
@media screen and (max-width: 1080px) {
  .footer {
    padding-top: 3.429rem;
    min-width: 100vw;
    width: 100vw;

    .footer-main {
      padding: 0 1.6rem;
      padding-bottom: 3.371rem;
      min-width: 100%;
      width: 100%;
      display: block;

      .footer-lt {
        .img {
          width: 7.61rem;
          margin-bottom: 24px;
        }

        .info {
          width: 100%;
          margin-bottom: 2.5rem;

          p {
            font-size: 0.8rem;
            line-height: 1.6rem;
            margin-bottom: 0;
          }
        }
      }

      .footer-rt {
        width: 100%;
        padding-top: 0;
        padding-left: 0;

        > div {
          flex: 1;

          .img {
            margin: 0 auto;
            width: 4.8rem;
            height: 4.8rem;
            border-width: 0.2rem;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          p {
            padding-top: 0.4rem;
            text-align: center;
            font-weight: 500;
            font-size: 0.686rem;
            line-height: 0.8rem;
          }
        }
      }
    }

    .bah {
      height: 3.84rem;
      min-width: 100vw;
      width: 100vw;
      overflow: hidden;

      p {
        height: 3.84rem;
        font-size: 0.686rem;
        line-height: 2.8rem;
      }
    }
  }
}
</style>
